<template>
    <div>
        <div class="header">
          <div class="city">
            <van-icon  @click="selectCity" style="margin-top:24px" name="location-o" />
            <!-- 乐山 -->
            <div  @click="selectCity" class="city-name">
              {{city}}
            </div>
            <van-icon @click="selectCity" size="8"  style="margin-top:27px" name="arrow-down" />
          </div>
          <div v-if="flag" class="search">
            <van-search
                 readonly
                shape="round"
                show-action
                :placeholder="SearchTitle"
                @click="$router.push('/search')"
                input-align="center"
                background="#f1f1f2"
            >
                <template #action>
                <div class="admin-search" @click="onSearch">搜索</div>
                </template>
             </van-search>
          </div>
          <div v-else class="search">
            <van-search  readonly
            @click="$router.push('/search')"
             background="#f1f1f2"
                shape="round" :placeholder="SearchTitle" />
          </div>
          <div  v-if="flag"  class="right">
           <van-icon  style="margin-top:22px" size="30" name="calendar-o" />
          </div>
           <div @click="scan"  v-else  class="right">
           <van-icon  style="margin-top:22px" size="30" name="scan" />
          </div>
        </div>
    </div>
</template>

<script>
import { getInfoCity } from '@/utils/auth'
export default {
  name: 'SearchPage',
  props: {
    SearchTitle: {
      type: String,
      default: '搜索影片、演员、影院'
    },
    flag: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      city: '' // 默认城市
    }
  },
  created () {
    const cities = getInfoCity()
    this.city = cities ? cities[0] : '乐山'
  },
  methods: {
    scan () {
      this.$toast.fail('功能开发中')
    },
    updateCity () {
      const cities = getInfoCity()
      this.city = cities ? cities[0] : '乐山'
      this.$store.commit('setcity', this.city)
    },
    onSearch () {
      console.log('搜索')
    },
    selectCity () {
      this.$router.push('/city')
    }
  },
  computed: {
  },
  watch: {
    '$route' () {
      this.updateCity()
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  // background-color: #fff;
  position: fixed;
  z-index: 999;
  width: 96%;
  top: 0px;
  margin: 0 auto;
  display: flex;
  padding-left: -3vw;
   background-color: #f1f2f3;
  justify-content: space-between;
  .city {
    width: 17%;
    display: flex;
    justify-content: space-between;
    text-align: center;
    // line-height: 50px;
    .city-name{
      width: 80%;
      font-size: 14px;
      margin-top: 22px;
    }
  }
  .right{
    width: 10%;
    text-align: center;

  }
  .search{
    width: 70%;
    margin-top: 8px;
    // 搜索框样式定制
    .van-search {
      padding-left: 0;
      margin-left: 2vw;
      .van-search__content--round{
      border: 1px solid pink;
      }
       ::v-deep .van-field__control[type=search]{
          font-size: 13px;
          text-align: left;
        }
    }
    .admin-search{
      position: absolute;
      width: 60px;
      height: 35px;
      background-color: pink;
      border-radius: 30px;
      top:18px;
      right: 35px;
      text-align: center;
      color: aliceblue;
       background: linear-gradient(to right, #dc89ce, #dc2159); /* 从左到右的渐变色 */
       font-size: 12px;
    }
  }
  // 搜索框样式定制
}

</style>
